<template>
	<view class="taskDetail-container">
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC' : ''" title="任务详情">
				<view class="order-content">
					<!-- 主任务信息 -->
					<van-skeleton title row="13" :loading="loading">
					<view v-if="taskDetail['父级id']" style="margin-bottom: 40rpx;">
						<view class="detail-title">
							<text>主任务信息</text>
						</view>
						<!-- <view class="detail-item">
							<text class="left">任务名称：</text>
							<view class="right-content">{{taskDetail['任务名称']}}</view>
						</view> -->
						<view class="content-item">
							<text class="item-name">项目名称：</text>
							<view class="right-content">{{ masterInfo['项目名称'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">岗位名称：</text>
							<view class="right-content">{{ masterInfo['岗位名称'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">任务名称：</text>
							<view class="right-content">{{ masterInfo['任务名称'] }}</view>
						</view>
						<view v-if="masterInfo['任务描述']" class="content-item">
							<text class="item-name">任务描述：</text>
							<view class="right-content">{{ masterInfo['任务描述'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">任务优先级：</text>
							<view class="right-content">{{ taskLevelObj[masterInfo['任务优先级']] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">执行人：</text>
							<view class="right-content">{{ masterInfo['执行人'] }}</view>
						</view>
						<view class="content-item" v-if="masterInfo['抄送人'].length">
							<text class="item-name">抄送人：</text>
							<view class="right-content">{{ masterInfo['抄送人'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">开始时间：</text>
							<view class="right-content">{{ masterInfo['开始日期'] | formatTime}}</view>
						</view>
						<view class="content-item">
							<text class="item-name">截止时间：</text>
							<view class="right-content">{{ masterInfo['结束日期'] | formatTime }}</view>
						</view>
						<file-list v-if="masterInfo['图片'][0]" title="示例图片" :idList="masterInfo['图片']" :fileObj="masterFile" :length="masterLength"></file-list>
					</view>
					<!-- 当前任务信息 -->
					<view style="margin-bottom: 40rpx;">
						<view class="detail-title">
							<text>当前任务信息</text>
							<view v-if="typeList.length" class="operator-btn"  @click="handleTap('picker')">操作</view>
							<lb-picker ref="picker" @click="handleTap('picker')" 
								mode="selector" :list="typeList" :dataset="{ name: 'label' }" @confirm="handleConfirm"
								@cancel="handleCancel">
							</lb-picker>
						</view>
						<!-- <view class="detail-item">
							<text class="left">任务名称：</text>
							<view class="right-content">{{taskDetail['任务名称']}}</view>
						</view> -->
						<view class="content-item">
							<text class="item-name">所属项目：</text>
							<view class="right-content">{{ taskDetail['项目名称'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">岗位名称：</text>
							<view class="right-content">{{ taskDetail['岗位名称'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">任务名称：</text>
							<view class="right-content">{{ taskDetail['任务名称'] }}</view>
						</view>
						<view v-if="taskDetail['任务描述']" class="content-item">
							<text class="item-name">任务描述：</text>
							<view class="right-content">{{ taskDetail['任务描述'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">任务优先级：</text>
							<view class="right-content">{{ taskLevelObj[taskDetail['任务优先级']] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">执行人：</text>
							<view class="right-content">{{ taskDetail['执行人'] }}</view>
						</view>
						<view class="content-item" v-if="taskDetail['抄送人'].length">
							<text class="item-name">抄送人：</text>
							<view class="right-content">{{ taskDetail['抄送人'] }}</view>
						</view>
						<view class="content-item">
							<text class="item-name">开始时间：</text>
							<view class="right-content">{{ taskDetail['开始日期'] | formatTime}}</view>
						</view>
						<view class="content-item">
							<text class="item-name">截止时间：</text>
							<view class="right-content">{{ taskDetail['结束日期'] | formatTime}}</view>
						</view>
						<file-list v-if="taskDetail['图片'][0]" title="示例图片" :idList="taskDetail['图片']" :fileObj="picFile" :length="picLength"></file-list>
					</view>
					<view style="margin-bottom: 40rpx;">
						<view class="detail-title">
							<text>完成结果</text>
						</view>
						<view class="content-item">
							<text class="item-name">完成状态：</text>
							<view class="right-content">{{taskStatusObj[taskDetail['任务状态']] }}</view>
						</view>
						<view v-if="taskDetail['考核评分']" class="content-item">
							<text class="item-name">考核评分：</text>
							<view>{{ taskDetail['考核评分'] }}</view>
						</view>
						<view v-if="taskDetail['完成描述']" class="content-item">
							<text class="item-name">完成描述：</text>
							<view class="right-content">{{ taskDetail['完成描述'] }}</view>
						</view>
						<!-- <view class="content-item">
							<text class="item-name">完成附件：</text>
							<view class="right-content">{{ '陈晓' }}</view>
						</view> -->
						<file-list v-if="taskDetail['完成附件']" title="完成附件" :idList="taskDetail['完成附件'].split(',')" :fileObj="completeFile" :length="imgLength"></file-list>
					</view>
					<!-- 子任务 -->
					<view class="detail-title">
						<text>子任务</text>
					</view>
					<child-task @detail="goChildDetail" :isMargin="true" :isShowDelete="false" :children="taskDetail['子任务']"></child-task>
					</van-skeleton>
				</view>
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC' : ''" title="跟进信息">
				<view class="example-body">
					<uni-steps :options="taskDetail['跟进消息']" active-color="#5094FF" :active="taskDetail['跟进消息'].length-1" direction="column" />
				</view>
			</van-tab>
		</van-tabs>
		
		<button v-if="isShowComplete" class="evaluate-btn" @click="goComplete">完成</button>
		<!-- <button class="evaluate-btn" @click="goEvaluate">评价</button> -->
	</view>
</template>

<script>
	import TaskInfo from '../Components/taskInfo.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import dayjs from 'dayjs'
	import ChildTask from '@/components/childTask.vue'
	import FileList from '@/components/my-components/fileList'
	export default {
		components: {
			TaskInfo,
			uniSteps,
			ChildTask,
			LbPicker,
			FileList
		},
		data() {
			return {
				loading: true,
				active: 0,
				masterInfo: {},
				imgItem: [],
				completeFile: {},
				imgLength: 0,
				picLength: 0,
				masterLength: 0,
				masterFile: {},
				picFile: {},
				isShowComplete: false,
				typeList: [],
				allTypeList: this.$type.allTypeList,
				urlTypeObj: this.$type.urlTypeObj,
				taskStatusObj: this.$type.taskStatusObj,
				taskLevelObj: this.$type.taskLevelObj,
				params: {
					任务id: null
				},
				taskDetail: {}
			}
		},
		onLoad(options) {
			if(options.id) {
				this.params.任务id = +options.id
				this.getTaskDetail()
			}
			// if(options.isEdit) {
			// 	this.typeList = this.allTypeList
			// }
			if(options.item) {
				this.taskDetail = JSON.parse(options.item)
				if(this.taskDetail.完成附件) {
					this.taskDetail.完成附件.split(',').forEach((item, index) => {
						this.downloadFile(item, index)
					})
				}
				if(this.taskDetail.图片[0]) {
					this.taskDetail.图片.forEach((item, index) => {
						this.downloadPic(item, index)
					})
				}
				if(this.taskDetail['父级id']) {
					this.getMasterInfo(this.taskDetail.父级id)
				}
				this.initBtn(this.taskDetail)
				// const id = uni.getStorageSync('userInfo').id
				// if(this.taskDetail.执行人id.includes(id) && [2,3].includes(this.taskDetail.任务状态)) {
				// 	this.isShowComplete = true
				// }
			}
		},
		methods: {
			changeTab(name, title) {
				this.active = name.target.index
			},
			getMasterInfo(id) {
				this.$http.post('taskSystem/task/info', {任务id: id}).then(res => {
					if(res.code === 10000) {
						if(res.data.图片[0]) {
							res.data.图片.forEach((item, index) => {
								this.downloadMaster(item, index)
							})
						}
						this.masterInfo = res.data
					}
				})
			},
			initBtn(data) {
				const id = uni.getStorageSync('userInfo').id
				if(data.执行人id.includes(id)) {
					if([2,3].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => [1,2].includes(item.id))
						this.isShowComplete = true
					}
				}
				if(data.抄送人id.includes(id)) {
					if([2,3,4,5].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => item.id === 4)
					}
				}
				if(data.创建人id === id) {
					if(data.任务状态 === 1) {
						this.typeList = this.$type.allTypeList.filter(item => [2,3].includes(item.id))
					}else if([2,3].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => [1,2,4].includes(item.id))
					}else if([4,5].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => item.id === 4)
					}
				}
				if(data.执行人id.includes(id) && data.抄送人id.includes(id)) {
					if([2,3].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => item.id !== 3)
					}else if([4,5].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => item.id === 4)
					}
				}
				if(data.执行人id.includes(id) && data.创建人id === id) {
					if(data.任务状态 === 1) {
						this.typeList = this.$type.allTypeList.filter(item => [2,3].includes(item.id))
					}else if([2,3].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => item.id !== 3)
					}else if([4,5].includes(data.任务状态)) {
						this.typeList = this.$type.allTypeList.filter(item => item.id === 4)
					}
				}
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			// 操作
			handleConfirm(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					// console.log(e.item.id)
					if(e.item.id === 1) {
						uni.navigateTo({
							url: this.urlTypeObj[e.item.id] + this.params.任务id + '&personId=' + this.taskDetail.执行人id[0]
						})
						return
					}
					if(e.item.id === 3) {
						uni.navigateTo({
							url: this.urlTypeObj[e.item.id] +  JSON.stringify(this.taskDetail)
						})
						return
					}
					uni.navigateTo({
						url: this.urlTypeObj[e.item.id] + this.params.任务id
					})
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			goChildDetail(index) {
				let item = this.taskDetail['子任务'][index]
				uni.navigateTo({
					url: '../taskDetail/taskDetail?item=' + JSON.stringify(item) 
				})
			},
			getTaskDetail() {
				// uni.showLoading()
				this.$http.post('taskSystem/task/info', this.params).then(res => {
					if(res.code === 10000) {
						console.log(res)
						if(res.data.完成附件) {
							res.data.完成附件.split(',').forEach((item, index) => {
								this.downloadFile(item, index)
							})
						}
						if(res.data.图片[0]) {
							res.data.图片.forEach((item, index) => {
								this.downloadPic(item, index)
							})
						}
						if(res.data.masterTaskId) {
							this.getMasterInfo(res.data.masterTaskId)
						}
						// res.data.开始日期 = dayjs(res.data.开始日期).format('YYYY-MM-DD HH:mm:ss')
						// res.data.结束日期 = dayjs(res.data.结束日期).format('YYYY-MM-DD HH:mm:ss')
						this.taskDetail = res.data
						this.initBtn(res.data)
						this.loading = false
						
					}
				})
			},
			downloadFile(id, index) {
				this.imgLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.completeFile[index] = {}
						this.completeFile[index].fileData = res.data.fileData
						// console.log(this.ticketFile)
					}
				})
			},
			downloadPic(id, index) {
				this.picLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					// console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.picFile[index] = {}
						this.picFile[index].fileData = res.data.fileData
						// console.log(this.ticketFile)
					}
				})
			},
			downloadMaster(id, index) {
				this.masterLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					// console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.masterFile[index] = {}
						this.masterFile[index].fileData = res.data.fileData
						// console.log(this.ticketFile)
					}
				})
			},
			goEvaluate() {
				uni.navigateTo({
					url: '../evaluate/evaluate'
				})
			},
			goComplete() {
				uni.navigateTo({
					url: '../finishTask/finishTask?id=' + this.taskDetail.任务id
				})
			}
		}
	}
</script>

<style lang="scss">
	.evaluate-btn {
		height: 90rpx;
		color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #1152FC;
		border-radius: 0;
	}
	.example-body {
		height: auto !important;
		// padding-bottom: 80rpx;
		margin-bottom: 80rpx;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14rpx;
		background-color: #ffffff;
	}
	.taskDetail-container {
		background-color: #f5f5f5;
		// height: 100vh;
	}
	.order-content {
		margin-bottom: 40rpx;
		width: 750rpx;
		background-color: #fff;
		margin-bottom: 135rpx;
		padding-left: 49rpx;
		padding-top: 30rpx;
		.detail-title {
			position: relative;
			font-size: 36rpx;
			margin-left: -24rpx;
			margin-bottom: 20rpx;
			display: flex;
			padding-left: 10rpx;
			justify-content: space-between;
			&:before {
				position: absolute;
				content: '';
				width: 6rpx;
				height: 38rpx;
				left: -6rpx;
				top: 6rpx;
				background-color: #1064E9;;
			}
			// padding-right: 30rpx;
			.operator-btn {
				position: absolute;
				right: 40rpx;
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 10rpx;
				background-color: #1152FC;
				color: #fff;
			}
		}
		.content-item {
			// height: 72rpx;
			padding: 20rpx 20rpx 20rpx 0;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			view {
				font-size: 32rpx;
			}
			.item-name {
				width: 250rpx;
				margin-right: 20rpx;
			}
			.right-content {
				flex: 1;
				word-break: break-all;
				padding-right: 30rpx;
			}
			.four {
				margin-right: 48rpx;
			}
		}
		.content-img {
			width: 100%;
			min-height: 280rpx;
			display: flex;
			margin-top: 40rpx;
			.img-item {
				width: 220rpx;
				height: 220rpx;
				margin-right: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
				&:last-child {
					margin-right: 0;
				}
			}
		}
		.sign-img {
			width: 100%;
			height: 280rpx;
			// background-color: pink;
			display: flex;
			padding-top: 40rpx;
			.left-text {
				width: 200rpx;
			}
			.sign-item {
				width: 220rpx;
				height: 220rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.detail-item {
			width: 750rpx;
			height: 88rpx;
			display: flex;
			line-height: 88rpx;
			// padding-left: 20rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;

			.left {
				margin-right: 37rpx;
			}

			.sign {
				width: 115rpx;
				height: 88rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				margin-right: 26rpx;
			}
		}
	}
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f5f5f5;
		min-height: 100%;
		height: auto;
	}
	// view {
	// 	font-size: 28rpx;
	// 	line-height: inherit;
	// }
	/*  #endif  */
	.example {
		padding: 0 30rpx 30rpx;
	}
	
	.example-info {
		padding: 30rpx;
		color: #3b4144;
		background: #ffffff;
	}
	
	.example-body {
		height: auto !important;
		// padding-bottom: 80rpx;
		margin-bottom: 80rpx;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14rpx;
		background-color: #ffffff;
	}
	
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}
</style>
